<html lang="en">
<head>
  <script src="d3.js"></script>
  <script src="dom-treemap.js" defer></script>
  <style>
    .-theme-with-dark-background {
      color: #fff;
    }

    @media (prefers-color-scheme: dark) {
      html {
        color: #fff;
      }
    }

    body {
      font-family: Arial, Helvetica, sans-serif;
      font-size: 0.75rem;
    }

    header {
      display: flex;
      flex-direction: row-reverse;
      justify-content: flex-end;
      gap: 0.25rem;
      margin-bottom: 0.25rem;
    }

    #tree-up {
      -webkit-appearance: none;
      appearance: none;
      display: inline;
      padding: 0;
      background: transparent;
      border: none;
      opacity: 0.5;
      cursor: pointer;
    }

    #tree-up:hover,
    #tree-up:focus {
      opacity: 1;
    }

    #tree-up svg {
      width: auto;
      height: calc(0.75rem * 1.35);
      color: inherit;
    }

    h1 {
      font-size: 0;
    }

    h1 span {
      font-size: 0.75rem;
      line-height: 1.35;
      font-family: monospace;
      font-weight: bold;
    }
  </style>
</head>
<body>
<header>
  <h1>Currently selected element: <span id="selected-element"></span></h1>
  <button id="tree-up" title="Climb further up the DOM tree">
    <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
      <path d="M35,66H15c-1.1,0-2,0.9-2,2v12c0,1.1,0.9,2,2,2h20c1.1,0,2-0.9,2-2V68C37,66.9,36.1,66,35,66z M33,78H17v-8h16V78z M35,42  H15c-1.1,0-2,0.9-2,2v12c0,1.1,0.9,2,2,2h20c1.1,0,2-0.9,2-2V44C37,42.9,36.1,42,35,42z M33,54H17v-8h16V54z M35,18H15  c-1.1,0-2,0.9-2,2v12c0,1.1,0.9,2,2,2h20c1.1,0,2-0.9,2-2V20C37,18.9,36.1,18,35,18z M33,30H17v-8h16V30z M77.8,30.8  c-0.8-0.8-1.6-1.5-2.5-2.1l7.5-7.2c0.6-0.6,0.8-1.4,0.5-2.2c-0.3-0.8-1-1.2-1.8-1.2H48.3c-1.1,0-2,0.9-2,2v31.7  c0,0.8,0.5,1.5,1.2,1.8c0.7,0.3,1.6,0.2,2.2-0.4l8.1-7.7c0.2,0.2,0.5,0.4,0.7,0.7C62,49.5,64,54,64,58.8c0,4.8-1.9,9.3-5.5,12.6  c-3.1,3-7.3,4.8-11.7,5.2c-1,0.1-1.7,0.8-1.8,1.8c-0.1,1,0.5,1.8,1.4,2.1c3.1,0.9,6.2,1.4,9.4,1.4c4.1,0,8.2-0.8,11.9-2.2  c3.7-1.5,7.1-3.7,10.1-6.5c5.9-5.6,9.1-13.2,9.1-21.2C87,44,83.7,36.5,77.8,30.8z M75.1,70.4c-5,4.8-11.7,7.5-18.8,7.6  c1.8-1,3.5-2.2,5-3.6c4.3-4.1,6.7-9.7,6.7-15.5c0-5.9-2.4-11.5-6.8-15.7c-0.8-0.8-1.6-1.4-2.4-2c-0.4-0.2-0.8-0.4-1.2-0.4  c-0.5,0-1,0.2-1.4,0.5l-6,5.7V22h26.1l-5.6,5.4c-0.4,0.4-0.7,1-0.6,1.6c0.1,0.6,0.4,1.2,0.9,1.5c1.4,0.9,2.7,2,3.9,3.1  c5.2,5,8,11.5,8,18.5C83,59,80.2,65.5,75.1,70.4z"/>
    </svg>
  </button>
</header>
<main>
  <div id="treemap" aria-describedby="legend"></div>
  <p id="legend">Descendant node distribution amongst the direct children of the currently selected node. Click on a leaf to drill yourself down the DOM tree.</p>
</main>
</body>
</html>
